<template>
  <div id="goods-detail">
    <detail-item
      class="topControlButton"
      @titleClick="titleClick"
      ref="detailNavCtrl"
    ></detail-item>

    <scroll class="content" ref="scroll" :probeType="3" @scroll="contentScroll">
      <detail-swiper
        :topImages="topImages"
        :pull-up-load="false"
      ></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info
        :detail-info="detailInfo"
        @imageLoad="imageLoad"
      ></detail-goods-info>
      <detail-param-info
        :goodsParam="goodsParam"
        ref="param"
      ></detail-param-info>
      <detail-comment-info
        :commentInfo="commentInfo"
        ref="comment"
      ></detail-comment-info>
      <goods-list :goods="recommends" ref="recommends"></goods-list>
    </scroll>
    <detail-bottom-bar @addToCart="addToCart"></detail-bottom-bar>
  </div>
</template>

<script>
import {
  getDetail,
  Goods,
  Shop,
  GoodsParam,
  getRecommend,
} from "../../network/goodsDetail";
import { debounce } from "../../common/utils";

import DetailItem from "./childConponents/DetaiItem.vue";
import DetailSwiper from "./childConponents/DetailSwiper.vue";
import DetailBaseInfo from "./childConponents/DetailBaseInfo.vue";
import DetailShopInfo from "./childConponents/DetailShopInfo.vue";
import DetailGoodsInfo from "./childConponents/DetailGoodsInfo.vue";
import Scroll from "../../components/common/scroll/Scroll.vue";
import DetailParamInfo from "./childConponents/DetailParamInfo.vue";
import DetailCommentInfo from "./childConponents/DetailCommentInfo.vue";
import GoodsList from "../../components/content/goods/GoodsList.vue";
import DetailBottomBar from "./childConponents/DetailBottomBar.vue";

export default {
  name: "GoodsDetail",
  components: {
    DetailItem,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    Scroll,
    DetailParamInfo,
    DetailCommentInfo,
    GoodsList,
    DetailBottomBar,
  },
  data() {
    return {
      iid: null,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      goodsParam: {},
      commentInfo: {},
      recommends: [],
      titleTopY: [0],
      getTitleTopY: null,
      currentIndex: 0,
      // cartObj: {},
    };
  },
  created() {
    this.iid = this.$route.params.id;

    this.getDetail();
    this.getRecommend();

    this.getTitleTopY = debounce(() => {
      this.$nextTick(() => {
        this.titleTopY = [];
        this.titleTopY.push(0);
        const paramTop = this.$refs.param.$el.offsetTop - 44;
        this.titleTopY.push(paramTop);
        const contentTop = this.$refs.comment.$el.offsetTop - 44;
        this.titleTopY.push(contentTop);
        const recommendTop = this.$refs.recommends.$el.offsetTop - 44;
        this.titleTopY.push(recommendTop);
        this.titleTopY.push(Number.MAX_VALUE);
        console.log(this.titleTopY);
      });
    }, 500);
  },
  methods: {
    getDetail() {
      getDetail(this.iid).then((res) => {
        // 数据
        // console.log(res);
        const data = res.data.result;

        // 1、轮播图数据
        this.topImages = data.itemInfo.topImages;

        // 2、商品详情信息数据
        this.goods = new Goods(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );

        // 3、商家信息数据
        this.shop = new Shop(data.shopInfo);

        // 4、商品图片详情数据
        this.detailInfo = data.detailInfo;

        // 5、商品参数数据
        this.goodsParam = new GoodsParam(
          data.itemParams.info,
          data.itemParams.rule
        );

        // 6、评论数据
        if (data.rate.list) {
          this.commentInfo = data.rate.list[0];
        }
        // 顶部控制栏的offstTop
        // this.getTitleTopY();
      });
    },

    imageLoad() {
      this.$refs.scroll.refresh();

      this.getTitleTopY();
    },

    // 详情页推荐数据
    getRecommend() {
      getRecommend().then((res) => {
        console.log(res);
        this.recommends = res.data.data.list;
      });
    },

    titleClick(index) {
      // console.log(index);
      this.$refs.scroll.scrollTo(0, -this.titleTopY[index], 500);
    },

    // 滚动内容显示对应标题
    contentScroll(position) {
      const positionY = -position.y;
      // console.log(positionY);
      for (let i = 0; i < this.titleTopY.length; i++) {
        // console.log(i);
        if (
          positionY >= this.titleTopY[i] &&
          positionY < this.titleTopY[i + 1]
        ) {
          if (this.currentIndex !== i) {
            // console.log(i);
            this.currentIndex = i;
            this.$refs.detailNavCtrl.currentIndex = this.currentIndex;
          }
          break;
        }
      }
    },

    // 加入购物车
    addToCart() {
      console.log("?");
      const cartObj = {};
      cartObj.iid = this.iid;
      cartObj.title = this.goods.title;
      cartObj.imgUrl = this.topImages[0];
      cartObj.desc = this.goods.desc;
      cartObj.price = this.goods.realPrice;

      // this.$store.commit("addToCart", cartObj);
      this.$store.dispatch("addToCart", cartObj);
    },
  },
};
</script>

<style scoped>
#goods-detail {
  position: relative;
  background-color: #fff;
  height: 100vh;
  z-index: 9;
}
.topControlButton {
  position: relative;
  z-index: 9;
  background-color: #fff;
}
.content {
  height: calc(100% - 93px);
  overflow: hidden;
}
</style>